<template>
  <div class="section">
    <!-- banner -->
    <div class="banner">
      <img
        src="../../../../assets/images/site/banner1.png"
        style="width: 100%; height: 100%"
        alt=""
      />
      <div class="desInfo">
        <div class="box">
          <div class="title">Charge Ahead with ChargPlex</div>
          <div class="des">Provide future charging solutions for MURBs</div>
          <div class="explore" @click="exploreClick()">Explore</div>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="product">
      <div class="ourProducts">
        <div class="title">
          <div class="left">
            <div class="our">Our Products</div>
            <div class="Pile">
              160kW-240kW Dual-gun Integrated DC Charging Pile
            </div>
          </div>
        </div>
        <ul>
          <li>
            <div class="up">
              <div class="image">
                <img
                  src="../../../../assets/images/site/our2.png"
                  style="width: 100%; height: 100%"
                  alt=""
                />
              </div>
            </div>
            <div class="descraption">
              <div class="kw">600Vac 160KW</div>
              <div class="Integrated">
                600Vac 200KW Dual-gun Integrated DC Charging Pile
              </div>
              <div class="btn" @click="productClick()">View detail</div>
            </div>
          </li>
          <li>
            <div class="up">
              <div class="image">
                <img
                  src="../../../../assets/images/site/our2.png"
                  style="width: 100%; height: 100%"
                  alt=""
                />
              </div>
            </div>
            <div class="descraption">
              <div class="kw">600Vac 200KW</div>
              <div class="Integrated">
                600Vac 200KW Dual-gun Integrated DC Charging Pile
              </div>
              <div class="btn" @click="productClick()">View detail</div>
            </div>
          </li>
          <li>
            <div class="up">
              <div class="image">
                <img
                  src="../../../../assets/images/site/our2.png"
                  style="width: 100%; height: 100%"
                  alt=""
                />
              </div>
            </div>
            <div class="descraption">
              <div class="kw">600Vac 240KW</div>
              <div class="Integrated">
                600Vac 200KW Dual-gun Integrated DC Charging Pile
              </div>
              <div class="btn" @click="productClick()">View detail</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="aboutChargeFlex">
        <div class="about_top">
          <div class="title_left">
            <div class="title">Our Solution</div>
            <div class="text">
              ChargePlex is a Canadian startup focused on establishing DC fast
              charging networks for multi unit residential buildings (MURBs).
            </div>
          </div>
          <div class="view_btn" @click="solutionClick()">
            <span>View all</span>
            <img
              src="../../../../assets/images/site/right_red.png"
              style="width: 18px; height: 16px"
              alt=""
            />
          </div>
        </div>
        <div class="about_imgs">
          <div class="img">
            <img
              src="../../../../assets/images/site/changeLT.png"
              style="width: 100%; height: 100%; border-radius: 5px"
              alt=""
            />
          </div>
          <div class="img">
            <img
              src="../../../../assets/images/site/changeRT.png"
              style="width: 100%; height: 100%; border-radius: 5px"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="network">
        <div class="title">
          Public Charging Network
        </div>
        <div class="flex">
          <div class="item" :class="{'img4':netWorkCurrent == index}" v-for="(item, index) in netWorkList" :key="index" @mouseenter="mouseenterWork(index)" @mouseleave="mouseleaveWork">
            <img
              :src="item.imgUrl"
              style="width: 100%; height: 280px; border-radius: 5px 5px 0px 0px"
              alt=""
            />
            <div class="info">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <div class="advantages">
        <div class="title">Our advantages</div>
        <div class="flex_imgs">
          <div class="imgs">
            <div class="icon_box">
              <img
                src="../../../../assets/images/site/advantages1.png"
                style="width: 50px; height: 50px; padding-top: 50px"
                alt=""
              />
            </div>
            <div class="img_title">Customized solution</div>
            <div class="img_des">
              We have access and official permission to climb hundreds of
              mountains in the world.
            </div>
          </div>
          <div class="imgs">
            <div class="icon_box">
              <img
                src="../../../../assets/images/site/advantages2.png"
                style="width: 50px; height: 50px; padding-top: 50px"
                alt=""
              />
            </div>
            <div class="img_title">Professional team</div>
            <div class="img_des">
              Innovative technology, experienced team, and strong partnerships
              will drive rapid growth and market leadership
            </div>
          </div>
          <div class="imgs">
            <div class="icon_box">
              <img
                src="../../../../assets/images/site/advantages3.png"
                style="width: 50px; height: 50px; padding-top: 50px"
                alt=""
              />
            </div>
            <div class="img_title">Business Model</div>
            <div class="img_des">
              The company's flexible business model and multiple revenue streams
              ensure long-term financial sustainability
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- experience -->
    <div class="experience">
      <div class="experience_box">
        <div class="ready">
          <div class="title">Are you ready for the charging experience?</div>
          <div class="chargeFlex">
            ChargePlex collaborates with multiple industry leaders to jointly
            promote the development of electric vehicle charging solutions.
          </div>
          <div class="contact" @click="contactClick()">Contact Us</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import newWork1 from "@/assets/images/site/network1.png";
import newWork2 from "@/assets/images/site/network2.png";
import newWork3 from "@/assets/images/site/network3.png";
import newWork4 from "@/assets/images/site/network4.png";
export default {
  data() {
    return {
      netWorkCurrent:6,
      netWorkList: [
        { imgUrl: newWork1, title: "MURBs" },
        { imgUrl: newWork2, title: "Gas Stations" },
        { imgUrl: newWork3, title: "Shopping Centers" },
        { imgUrl: newWork4, title: "Along Highways" },
      ],
    };
  },
  methods:{
    mouseenterWork(i){
      this.netWorkCurrent = i
    },
    mouseleaveWork(){
      this.netWorkCurrent = 6
    },
    moveExplore(){},
    btnMove(){},
    contactClick(){
      this.$router.push({name:'jinchun'})
    },
    productClick(){
      this.$router.push({name:'rndustrialLayout'})
    },
    solutionClick(){
      this.$router.push({name:'hibiscusAltissima'})
    },
    exploreClick(){
      this.$router.push({name:'hibiscusAltissima'})
    }
  }
};
</script>
<style scoped>
.section {
  width: 100%;
  height: 100%;
}
.banner {
  width: 100%;
  height: 720px;
  background-image: url("../../../../assets/images/site/banner.png");
  background-size: cover;
  position: relative;
}

.desInfo {
  position: absolute;
  top: 250px;
  left: 0;
  width: 100%;
}
.box {
  width: 80%;
  margin: 0 auto;
}
.box .title {
  color: #ffffff;
  font-size: 64px;
  font-family: Montserrat;
  width: 600px;
  margin-bottom: 20px;
}
.box .des {
  color: #ffffff;
  width: 100%;
  opacity: 0.6;
  font-size: 24px;
  margin-bottom: 30px;
}
.box .explore {
  width: 120px;
  height: 42px;
  line-height: 42px;
  background: #ff6c01;
  border-radius: 65px;
  text-align: center;
  color: #ffffff;
  font-size: 18px;
}
.box .explore:hover{
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.product {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 140px;
}
.ourProducts {
  padding-top: 114px;
}
.ourProducts .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}
.ourProducts .title .our {
  color: #000000;
  font-family: Montserrat;
  font-weight: bold;
  font-size: 36px;
  margin-bottom: 10px;
}
.ourProducts .title .Pile {
  color: #525252;
  font-size: 14px;
}
.ourProducts .right {
  display: flex;
}
.ourProducts .right .lt {
  width: 48px;
  height: 48px;
  background: #514e4e;
  text-align: center;
  border-radius: 48px;
  position: relative;
  box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.07),
    0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.0503),
    0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.0417),
    0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.035),
    0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.0283),
    0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.0197);
}
.ourProducts .right .rt {
  width: 48px;
  height: 48px;
  position: relative;
  background: #fff;
  border-radius: 48px;
  text-align: center;
  margin-left: 17px;
  box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.07),
    0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.0503),
    0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.0417),
    0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.035),
    0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.0283),
    0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.0197);
}

ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
li {
  width: 32%;
  padding-bottom: 10px;
  box-sizing: border-box;
  margin-top: 10px;
  border-radius: 5px;
  background: #fefcfc;
}
li:hover {
  box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.07),
    0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.0503),
    0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.0417),
    0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.035),
    0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.0283),
    0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.0197);
}
li .up {
  padding: 20px 0;
  background: #f4f4f4;
}
li .up .image {
  width: 190px;
  height: 242px;
  margin: 0 auto;
}
li .descraption {
  background: #fff;
  padding: 28px 37px 16px 37px;
  font-family: Montserrat;
}
.descraption .kw {
  color: #323f51;
  font-size: 28px;
  height: 50px;
  line-height: 50px;
}
.descraption .Integrated {
  font-size: 14px;
  color: #525252;
  margin-bottom: 36px;
}
.descraption .btn {
  width: 82px;
  height: 30px;
  margin: 0 auto;
  text-align: center;
  line-height: 30px;
  border-radius: 65px;
  background: #ff6c01;
  color: #fff;
  font-size: 14px;
  padding: 5px 10px;
}
.descraption .btn:hover{
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.aboutChargeFlex {
  padding-top: 114px;
}
.aboutChargeFlex .about_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Montserrat;
  margin-bottom: 60px;
}
.title_left .title {
  font-size: 36px;
  color: #000000;
  font-weight: bold;
  margin-bottom: 11px;
}
.title_left .text {
  font-size: 14px;
  color: #525252;
}
.view_btn {
  display: flex;
  align-items: center;
  padding: 22px 60px;
  border: 2px solid #ff6c01;
  box-sizing: border-box;
  border-radius: 65px;
}
.view_btn:hover{
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.view_btn span {
  font-size: 14px;
  color: #ff6c01;
  margin-right: 10px;
}
.about_imgs {
  display: flex;
  justify-content: space-between;
}
.about_imgs .img {
  width: 48%;
  height: 357px;
  border-radius: 5px;
}
.network {
  padding-top: 114px;
}
.network .title {
  width: 100%;
  text-align: center;
  color: #000000;
  font-size: 48px;
  font-weight: 600;
  font-family: Montserrat;
  margin-bottom: 60px;
}
.network .flex {
  display: flex;
  justify-content: space-between; /* 关键点：子项之间的空间均匀分布 */
}
.network .item {
  width: 24%; /* 关键点：flex项目会平均分配空间 */
  background: #fefefe;
  border-radius: 5px;
}
.network .netWorkItem{
  
}
.network .img4 {
  position: relative;
  box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.07),
    0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.0503),
    0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.0417),
    0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.035),
    0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.0283),
    0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.0197);
}
.network .img4 .craption {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 14px;
  color: #faf9f9;
  line-height: 34px;
  width: 80%;
}
.network .item .info {
  padding: 25px 20px;
  color: #000000;
  font-size: 24px;
  font-weight: 500;
}
.network .item .des {
  padding: 43px 20px;
  color: #000000;
  font-size: 24px;
  font-weight: 500;
}
.advantages {
  padding-top: 114px;
}
.advantages .title {
  color: #000000;
  font-size: 48px;
  font-family: Montserrat;
  font-weight: 600;
  width: 100%;
  text-align: center;
  margin-bottom: 110px;
}
.advantages .flex_imgs {
  display: flex;
  justify-content: space-between; /* 关键点：子项之间的空间均匀分布 */
}
.advantages .flex_imgs .imgs {
  width: 33%; /* 关键点：flex项目会平均分配空间 */
  border-radius: 5px;
}
.advantages .flex_imgs .imgs .icon_box {
  width: 150px;
  height: 150px;
  border-radius: 150px;
  background: rgba(255, 108, 1, 0.2);
  margin: 0 auto;
  text-align: center;
}
.advantages .flex_imgs .imgs .img_title {
  color: #000000;
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 13px;
  padding-top: 46px;
  width: 100%;
  text-align: center;
}
.advantages .flex_imgs .imgs .img_des {
  color: #252121;
  font-size: 18px;
  width: 100%;
  text-align: center;
}
.experience {
  width: 100%;
  height: 574px;
  background-image: url("../../../../assets/images/site/experience.png");
  background-size: cover;
  position: relative;
}
.experience_box {
  position: absolute;
  top: 150px;
  width: 100%;
  /* height: 200px; */
  /* border: 1px solid red; */
}
.experience_box .ready {
  color:#fff;
  width:70%;
  margin: 0 auto;
  text-align: center;
}
.experience_box .ready .title{
  font-size: 48px;
  font-weight: 500;
  margin-bottom: 50px;
}
.experience_box .ready .chargeFlex{
  font-size: 18px;
  margin-bottom: 80px;
}
.experience_box .ready .contact {
  width: 150px;
  height: 62px;
  margin: 0 auto;
  line-height: 62px;
  background: #ff6c01;
  border-radius: 65px;
  text-align: center;
  color: #ffffff;
  font-size: 18px;
}
.experience_box .ready .contact:hover {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
</style>
